<template>
  <div>
    <el-header><top-bar></top-bar></el-header>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="订单号" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.salesNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货时间" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.deliveryTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户Id" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>用户Id: {{ scope.row.userId }}</p>
              <p>收货地址: {{ scope.row.logisticsInformation }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.userId }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <!-- <el-table-column label="商品Id" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.commodityId }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="买家状态" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.buyerStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付方式" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.paymentMethod }}</span>
          </template>
        </el-table-column>
        <el-table-column label="付款金额" width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.totalMoney }}</span>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
import { getSales } from "../../../api/Commodity";
import TopBar from "../TopBar/TopBar.vue";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      tableData: [],
      userId: localStorage.getItem("userId"),
    };
  },
  methods: {
    fetch() {
      getSales()
        .then((data) => {
          var res = data.data.data;
          res.map((val) => {
              // console.log(val);
            if (val.userId == parseInt(this.userId)) {
              this.tableData.push(val);
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.fetch();
  },
};
</script>

<style>
</style>